<template>
    <q-page class="m-auto w-full bg-pink-50 h-full" padding>
      <div class="w-full flex justify-center h-12">
        <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="text">
          <template v-slot:append>
            <q-icon class="hover:cursor-pointer" name="search" />
          </template>
        </q-input>
      </div>
      <div class="w-full m-auto mt-10 bg-white rounded-lg  container grid grid-cols-4 gap-6 overflow-y-scroll">
        <div @click="jumpToDetailPage(item)" class=" hover:shadow-lg hover:cursor-pointer"
          v-for=" item in data.slice(0, 10)" :key="item">
          <div
            class="max-w-sm h-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
            <div class="w-full h-2/3">
              <img class="rounded-t-lg  w-full h-full " :src="item.pics" alt="" />
            </div>
            <div class="p-5 h-1/3">
              <a class="flex justify-between">
                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ item.name }}</h5>
                <span
                  class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
                  {{ item.rating }}
                </span>
              </a>
              <p class="mt-1 mb-3 font-normal text-gray-700 dark:text-gray-400">
                {{ item.ingredient }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </q-page>
  </template>
  
  <script setup>
  import { ref,watch } from 'vue';
  import { useRouter,useRoute } from 'vue-router';
  import { getAllBlogs } from "src/boot/blogs/blogs";
  const router = useRouter();
  const route = useRoute()
  let data = ref([]);
  watch( ()=>route.query.group,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
    getAllBlogs().then(res => {
    let resp = res.data.data
    let resp_data = resp.filter(item=>{
        return item.category === newVal
    })
    data.value = resp_data 
  })
  })
  getAllBlogs().then(res => {
    let resp = res.data.data
    let resp_data = resp.filter(item=>{
        return item.category === newVal
    })
    data.value = resp_data }) 

  
  function jumpToDetailPage(queryItem) {
    router.push({
      name: 'detail',
      query: queryItem
    })
  }
  </script>
  
  <style>
  .container {
    height: calc(100vh - 150px);
  }
  </style>
  